<template>
  <div v-if="list.length>0">
    <nuxt-link v-for="item in list" :key="item.order_id" :to="`order-detail?order_id=${item.order_id}`" class="order-item">
      <div class="info">
        <img :src="item.other_head_portrait" alt="" class="head">
        <div class="txt">
          <div class="name">{{ item.other_nickname }}</div>
          <p>{{ $t('数量') }}：{{ item.amount }}</p>
          <p>{{ $t('时间') }}：{{ item.order_time }}</p>
        </div>
        <div v-if="item.side===1" class="type">{{ $t('卖出') }}{{ item.coin_name }}</div>
        <div v-if="item.side===2" class="type">{{ $t('买入') }}{{ item.coin_name }}</div>
      </div>
      <div class="price"><span class="sub">{{ $t('单价') }}</span>{{ item.price_usd }}</div>
      <div v-if="status === 0" class="bar">
        <button type="button" class="btn">{{ $t('已取消') }}</button>
      </div>
      <div v-else-if="status === 1" class="bar">
        <button type="button" class="btn">{{ $t('已完成') }}</button>
        <button type="button" class="btn" @click.prevent="goAppeal(item.order_id)">{{ $t('申诉') }}</button>
      </div>
      <div v-else-if="status === 2" class="bar">
        <button type="button" class="btn">{{ $t('未付款') }}</button>
        <button type="button" class="btn" @click.prevent="goAppeal(item.order_id)">{{ $t('申诉') }}</button>
      </div>
      <div v-else-if="status === 3" class="bar">
        <button type="button" class="btn">{{ $t('已付款') }}</button>
        <button type="button" class="btn" @click.prevent="goAppeal(item.order_id)">{{ $t('申诉') }}</button>
      </div>
      <div v-else-if="status === 11" class="bar">
        <span class="btn">{{ $t('申诉中') }}</span>
      </div>
      <div v-else-if="status === 12" class="bar">
        <span class="btn">{{ $t('申诉已处理') }}</span>
      </div>
    </nuxt-link>
  </div>
  <div v-else>
    <div class="tip-box">
      <img src="~@/assets/icons/icon-notes.svg" alt="" class="logo">
      {{ $t("您还没记录") }}~
    </div>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  props: {
    status: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      list: []
    }
  },
  watch: {
    status (status) {
      this.loadOrderHistory(status)
    }
  },
  beforeMount () {
    this.loadOrderHistory(this.status)
  },
  methods: {
    ...mapActions({
      getOrderHistory: 'otc/getOrderHistory'
    }),
    loadOrderHistory (status) {
      this.list = []
      this.getOrderHistory({ type: status })
        .then((data) => {
          if (data.data) {
            this.list = data.data
          }
        })
    },
    goAppeal (id) {
      this.$router.push({
        path: 'order-appeal',
        query: {
          orderid: id
        }
      })
    },
    payment (id) {
      this.$toast.show(this.$t('确定支付此订单？'), {
        action: {
          text: this.$t('确认'),
          onClick () {}
        }
      })
    }
  }
}
</script>
<style scoped>
.order-item {
  display: block;
  padding: 10px 15px;
  border-bottom: 5px solid #eee;
}
.order-item .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.order-item .head {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.order-item .txt {
  flex-grow: 1;
  padding: 0 15px;
}
.order-item .name {
  font-size: 16px;
  margin-bottom: 5px;
}
.order-item .txt p {
  color: #666666;
}
.order-item .type {
  font-size: 14px;
  color: #666;
}
.order-item .price {
  margin-top: 10px;
  text-align: center;
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.order-item .price span {
  font-size: .6em;
  font-weight: normal;
  margin-right: .1em;
}
.order-item .bar {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: row-reverse;
}
.order-item .bar .btn {
  color: #ffffff;
  background: #1b8afe;
  line-height: 24px;
  border-radius: 3px;
  padding: 0 10px;
  margin-left: 10px;
}
.tip-box {
  padding-top: 25%;
  text-align: center;
  color: #666666;
}
.tip-box .logo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto 10px;
}
</style>
